<template>
	<view class="help-container">
		<!-- 页面头部 -->
		<view class="help-header">
			<text class="page-title">帮助中心</text>
			<text class="page-subtitle">快速上手脑力魔方</text>
		</view>
		
		<!-- 搜索框 -->
		<view class="search-section">
			<view class="search-box">
				<view class="search-icon">🔍</view>
				<input 
					class="search-input" 
					v-model="searchKeyword" 
					placeholder="搜索帮助内容..."
					@input="handleSearch"
				/>
				<view class="search-clear" v-if="searchKeyword" @click="clearSearch">×</view>
			</view>
		</view>
		
		<!-- 快速导航 -->
		<view class="quick-nav" v-if="!searchKeyword">
			<view class="nav-title">快速导航</view>
			<view class="nav-grid">
				<view 
					v-for="nav in quickNavItems" 
					:key="nav.id"
					class="nav-item"
					@click="scrollToSection(nav.target)"
				>
					<view class="nav-icon">{{ nav.icon }}</view>
					<text class="nav-text">{{ nav.title }}</text>
				</view>
			</view>
		</view>
		
		<!-- 帮助内容 -->
		<view class="help-content">
			<!-- 搜索结果 -->
			<view class="search-results" v-if="searchKeyword && searchResults.length > 0">
				<view class="section-title">搜索结果 ({{ searchResults.length }})</view>
				<view class="result-list">
					<view 
						v-for="result in searchResults" 
						:key="result.id"
						class="result-item"
						@click="expandItem(result.id)"
					>
						<view class="result-header">
							<text class="result-title">{{ result.title }}</text>
							<view class="result-category">{{ result.category }}</view>
						</view>
						<view class="result-preview">{{ result.preview }}</view>
					</view>
				</view>
			</view>
			
			<!-- 无搜索结果 -->
			<view class="no-results" v-if="searchKeyword && searchResults.length === 0">
				<view class="no-results-icon">🔍</view>
				<text class="no-results-text">未找到相关内容</text>
				<text class="no-results-tip">试试其他关键词或浏览下方分类</text>
			</view>
			
			<!-- 帮助分类 -->
			<view class="help-sections" v-if="!searchKeyword">
				<!-- 新手指南 -->
				<view class="help-section" id="getting-started">
					<view class="section-header">
						<text class="section-title">新手指南</text>
						<view class="section-icon">🚀</view>
					</view>
					<view class="faq-list">
						<view 
							v-for="item in gettingStartedItems" 
							:key="item.id"
							:class="['faq-item', { expanded: expandedItems.includes(item.id) }]"
							@click="toggleItem(item.id)"
						>
							<view class="faq-question">
								<text class="question-text">{{ item.question }}</text>
								<view class="question-arrow">{{ expandedItems.includes(item.id) ? '−' : '+' }}</view>
							</view>
							<view class="faq-answer" v-if="expandedItems.includes(item.id)">
								<text class="answer-text">{{ item.answer }}</text>
								<view class="answer-steps" v-if="item.steps">
									<view 
										v-for="(step, index) in item.steps" 
										:key="index"
										class="step-item"
									>
										<view class="step-number">{{ index + 1 }}</view>
										<text class="step-text">{{ step }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 测试说明 -->
				<view class="help-section" id="tests">
					<view class="section-header">
						<text class="section-title">测试说明</text>
						<view class="section-icon">🧪</view>
					</view>
					<view class="test-cards">
						<view 
							v-for="test in testExplanations" 
							:key="test.id"
							class="test-card"
							@click="toggleItem(test.id)"
						>
							<view class="test-header">
								<view class="test-icon">{{ test.icon }}</view>
								<view class="test-info">
									<text class="test-name">{{ test.name }}</text>
									<text class="test-desc">{{ test.description }}</text>
								</view>
								<view class="test-arrow">{{ expandedItems.includes(test.id) ? '−' : '+' }}</view>
							</view>
							<view class="test-details" v-if="expandedItems.includes(test.id)">
								<view class="detail-section">
									<text class="detail-title">测试目的</text>
									<text class="detail-text">{{ test.purpose }}</text>
								</view>
								<view class="detail-section">
									<text class="detail-title">操作方法</text>
									<text class="detail-text">{{ test.instructions }}</text>
								</view>
								<view class="detail-section">
									<text class="detail-title">评分标准</text>
									<text class="detail-text">{{ test.scoring }}</text>
								</view>
								<view class="detail-section" v-if="test.tips">
									<text class="detail-title">小贴士</text>
									<view class="tips-list">
										<text 
											v-for="(tip, index) in test.tips" 
											:key="index"
											class="tip-item"
										>• {{ tip }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 常见问题 -->
				<view class="help-section" id="faq">
					<view class="section-header">
						<text class="section-title">常见问题</text>
						<view class="section-icon">❓</view>
					</view>
					<view class="faq-list">
						<view 
							v-for="item in faqItems" 
							:key="item.id"
							:class="['faq-item', { expanded: expandedItems.includes(item.id) }]"
							@click="toggleItem(item.id)"
						>
							<view class="faq-question">
								<text class="question-text">{{ item.question }}</text>
								<view class="question-arrow">{{ expandedItems.includes(item.id) ? '−' : '+' }}</view>
							</view>
							<view class="faq-answer" v-if="expandedItems.includes(item.id)">
								<text class="answer-text">{{ item.answer }}</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 技巧与建议 -->
				<view class="help-section" id="tips">
					<view class="section-header">
						<text class="section-title">技巧与建议</text>
						<view class="section-icon">💡</view>
					</view>
					<view class="tips-grid">
						<view 
							v-for="tip in generalTips" 
							:key="tip.id"
							class="tip-card"
						>
							<view class="tip-header">
								<view class="tip-icon">{{ tip.icon }}</view>
								<text class="tip-title">{{ tip.title }}</text>
							</view>
							<text class="tip-content">{{ tip.content }}</text>
						</view>
					</view>
				</view>
				
				<!-- 联系我们 -->
				<view class="help-section" id="contact">
					<view class="section-header">
						<text class="section-title">联系我们</text>
						<view class="section-icon">📞</view>
					</view>
					<view class="contact-info">
						<view class="contact-item">
							<view class="contact-icon">📧</view>
							<view class="contact-details">
								<text class="contact-label">邮箱反馈</text>
								<text class="contact-value">support@braincube.com</text>
							</view>
						</view>
						<view class="contact-item">
							<view class="contact-icon">💬</view>
							<view class="contact-details">
								<text class="contact-label">在线客服</text>
								<text class="contact-value">工作日 9:00-18:00</text>
							</view>
						</view>
						<view class="contact-item">
							<view class="contact-icon">🌐</view>
							<view class="contact-details">
								<text class="contact-label">官方网站</text>
								<text class="contact-value">www.braincube.com</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 反馈按钮 -->
		<view class="feedback-fab" @click="showFeedback">
			<text class="fab-icon">💬</text>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 响应式数据
const searchKeyword = ref('')
const expandedItems = ref([])
const searchResults = ref([])

// 快速导航项
const quickNavItems = ref([
	{ id: 1, title: '新手指南', icon: '🚀', target: 'getting-started' },
	{ id: 2, title: '测试说明', icon: '🧪', target: 'tests' },
	{ id: 3, title: '常见问题', icon: '❓', target: 'faq' },
	{ id: 4, title: '技巧建议', icon: '💡', target: 'tips' }
])

// 新手指南内容
const gettingStartedItems = ref([
	{
		id: 'start-1',
		question: '如何开始第一次测试？',
		answer: '欢迎使用脑力魔方！开始测试非常简单：',
		steps: [
			'在首页选择你想要进行的测试类型',
			'阅读测试说明，了解规则和操作方法',
			'选择合适的难度等级（建议新手从简单开始）',
			'点击开始按钮，按照提示完成测试',
			'查看测试结果和详细分析'
		]
	},
	{
		id: 'start-2',
		question: '测试结果如何解读？',
		answer: '测试结果包含多个维度的评估，帮助你全面了解自己的认知能力表现。每项测试都会提供详细的分析报告和改进建议。'
	},
	{
		id: 'start-3',
		question: '如何查看历史记录？',
		answer: '你可以在个人中心查看所有测试的历史记录，包括分数趋势、进步情况等详细统计信息。'
	},
	{
		id: 'start-4',
		question: '如何设置个人偏好？',
		answer: '在设置页面可以调整主题、语言、音效等个人偏好，以及测试相关的默认配置。'
	}
])

// 测试说明
const testExplanations = ref([
	{
		id: 'test-memory',
		name: '记忆力测试',
		icon: '🧠',
		description: '测试短期记忆和工作记忆能力',
		purpose: '评估你记住和回忆数字序列的能力，这是工作记忆的重要组成部分。',
		instructions: '观察屏幕上显示的数字序列，然后按照相同的顺序点击数字。随着等级提升，序列会变得更长更复杂。',
		scoring: '根据正确回忆的序列长度和准确率计分。连续答对可以提升等级，答错会降低等级。',
		tips: [
			'集中注意力，避免分心',
			'可以尝试将数字分组记忆',
			'保持放松，紧张会影响记忆表现',
			'定期练习可以提高记忆能力'
		]
	},
	{
		id: 'test-reaction',
		name: '反应力测试',
		icon: '⚡',
		description: '测试视觉反应速度和注意力',
		purpose: '评估你对视觉刺激的反应速度，这反映了神经系统的处理效率。',
		instructions: '等待屏幕变绿后立即点击。过早点击会被判定为抢跑，需要重新开始。',
		scoring: '以毫秒为单位记录反应时间。时间越短表示反应越快。会计算平均反应时间和稳定性。',
		tips: [
			'保持手指悬停在屏幕上方',
			'专注于屏幕中央，用余光观察变化',
			'不要预判，等待确实变绿再点击',
			'保持良好的睡眠有助于提高反应速度'
		]
	},
	{
		id: 'test-chimp',
		name: '黑猩猩测试',
		icon: '🐵',
		description: '测试视觉记忆和处理速度',
		purpose: '基于著名的黑猩猩认知实验，测试你的视觉记忆和快速信息处理能力。',
		instructions: '记住数字的位置，然后按照从小到大的顺序点击它们。数字会在短时间内消失，需要依靠记忆完成。',
		scoring: '根据正确点击的数字数量和完成时间计分。准确率和速度都会影响最终得分。',
		tips: [
			'快速扫视整个屏幕，记住数字位置',
			'先点击数字1，其他数字会消失',
			'练习空间记忆技巧',
			'保持冷静，不要因为时间压力而慌乱'
		]
	},
	{
		id: 'test-visual',
		name: '视觉记忆测试',
		icon: '👁️',
		description: '测试视觉模式识别和记忆',
		purpose: '评估你对视觉模式的记忆和识别能力，这对日常生活中的视觉信息处理很重要。',
		instructions: '观察显示的图案序列，然后按照相同的顺序重现这些图案。',
		scoring: '根据正确重现的图案数量和序列准确性计分。完全正确可以进入下一等级。',
		tips: [
			'注意图案的形状、颜色和位置',
			'可以尝试为图案编故事来帮助记忆',
			'练习时从简单图案开始',
			'充足的休息有助于视觉记忆'
		]
	},
	{
		id: 'test-typing',
		name: '打字速度测试',
		icon: '⌨️',
		description: '测试打字速度和准确率',
		purpose: '评估你的打字技能，包括速度（WPM）和准确率，这在数字时代是重要的基础技能。',
		instructions: '根据显示的文本进行打字，尽量保持速度和准确率的平衡。',
		scoring: '以每分钟字数（WPM）和准确率为主要指标。综合考虑速度和错误率给出评级。',
		tips: [
			'保持正确的手指位置',
			'不要只追求速度，准确率同样重要',
			'定期练习可以显著提高打字速度',
			'使用所有手指，不要依赖几个手指'
		]
	}
])

// 常见问题
const faqItems = ref([
	{
		id: 'faq-1',
		question: '为什么我的分数比较低？',
		answer: '分数受多种因素影响，包括注意力、疲劳程度、练习次数等。不要气馁，认知能力是可以通过练习提高的。建议定期练习，保持良好的作息，逐步提升表现。'
	},
	{
		id: 'faq-2',
		question: '多久测试一次比较合适？',
		answer: '建议每天进行1-2次测试，每次不超过30分钟。过度测试可能导致疲劳，影响表现。最重要的是保持规律性，持续的练习比偶尔的长时间练习更有效。'
	},
	{
		id: 'faq-3',
		question: '测试结果准确吗？',
		answer: '我们的测试基于科学的认知评估方法设计，具有一定的参考价值。但请注意，这些测试主要用于自我了解和练习，不能替代专业的医学或心理学评估。'
	},
	{
		id: 'faq-4',
		question: '如何提高测试成绩？',
		answer: '提高成绩需要时间和练习。建议：1）保持规律的练习；2）确保充足的睡眠；3）保持健康的饮食；4）进行适当的体育锻炼；5）学习相关的认知技巧和策略。'
	},
	{
		id: 'faq-5',
		question: '数据会被保存多久？',
		answer: '你的测试数据会保存在本地设备上，不会上传到服务器。你可以随时在设置中清除数据，或者导出数据进行备份。'
	},
	{
		id: 'faq-6',
		question: '可以和朋友比较成绩吗？',
		answer: '目前支持本地排行榜功能，你可以查看自己的历史表现趋势。我们正在开发社交功能，未来将支持与好友的成绩比较和挑战。'
	}
])

// 通用技巧
const generalTips = ref([
	{
		id: 'tip-1',
		title: '最佳测试时间',
		icon: '⏰',
		content: '大多数人在上午10-12点和下午3-5点时认知能力最佳。选择你精神状态最好的时间进行测试。'
	},
	{
		id: 'tip-2',
		title: '环境准备',
		icon: '🏠',
		content: '选择安静、光线充足的环境，减少干扰因素。确保设备电量充足，网络连接稳定。'
	},
	{
		id: 'tip-3',
		title: '心理状态',
		icon: '🧘',
		content: '保持放松和专注的心态。过度紧张或焦虑会影响表现。深呼吸，相信自己的能力。'
	},
	{
		id: 'tip-4',
		title: '规律练习',
		icon: '📅',
		content: '制定规律的练习计划，每天坚持。短时间的规律练习比偶尔的长时间练习更有效。'
	},
	{
		id: 'tip-5',
		title: '健康生活',
		icon: '💪',
		content: '保持充足睡眠、均衡饮食和适量运动。良好的身体状态是认知能力的基础。'
	},
	{
		id: 'tip-6',
		title: '分析结果',
		icon: '📊',
		content: '认真查看测试结果和分析报告，了解自己的强项和需要改进的地方，有针对性地练习。'
	}
])

// 所有帮助内容（用于搜索）
const allHelpContent = computed(() => {
	const content = []
	
	// 添加新手指南
	gettingStartedItems.value.forEach(item => {
		content.push({
			id: item.id,
			title: item.question,
			category: '新手指南',
			preview: item.answer.substring(0, 50) + '...',
			content: item.question + ' ' + item.answer + (item.steps ? ' ' + item.steps.join(' ') : '')
		})
	})
	
	// 添加测试说明
	testExplanations.value.forEach(item => {
		content.push({
			id: item.id,
			title: item.name,
			category: '测试说明',
			preview: item.description,
			content: item.name + ' ' + item.description + ' ' + item.purpose + ' ' + item.instructions + ' ' + item.scoring + (item.tips ? ' ' + item.tips.join(' ') : '')
		})
	})
	
	// 添加常见问题
	faqItems.value.forEach(item => {
		content.push({
			id: item.id,
			title: item.question,
			category: '常见问题',
			preview: item.answer.substring(0, 50) + '...',
			content: item.question + ' ' + item.answer
		})
	})
	
	// 添加技巧建议
	generalTips.value.forEach(item => {
		content.push({
			id: item.id,
			title: item.title,
			category: '技巧建议',
			preview: item.content.substring(0, 50) + '...',
			content: item.title + ' ' + item.content
		})
	})
	
	return content
})

// 处理搜索
const handleSearch = () => {
	if (!searchKeyword.value.trim()) {
		searchResults.value = []
		return
	}
	
	const keyword = searchKeyword.value.toLowerCase()
	searchResults.value = allHelpContent.value.filter(item => 
		item.content.toLowerCase().includes(keyword)
	)
}

// 清除搜索
const clearSearch = () => {
	searchKeyword.value = ''
	searchResults.value = []
}

// 切换展开状态
const toggleItem = (id) => {
	const index = expandedItems.value.indexOf(id)
	if (index > -1) {
		expandedItems.value.splice(index, 1)
	} else {
		expandedItems.value.push(id)
	}
}

// 展开项目（用于搜索结果）
const expandItem = (id) => {
	if (!expandedItems.value.includes(id)) {
		expandedItems.value.push(id)
	}
	// 清除搜索，显示完整内容
	clearSearch()
	// 滚动到对应项目
	setTimeout(() => {
		scrollToItem(id)
	}, 100)
}

// 滚动到指定部分
const scrollToSection = (target) => {
	uni.pageScrollTo({
		selector: `#${target}`,
		duration: 300
	})
}

// 滚动到指定项目
const scrollToItem = (id) => {
	// 这里可以实现滚动到特定项目的逻辑
	console.log('Scroll to item:', id)
}

// 显示反馈
const showFeedback = () => {
	uni.showActionSheet({
		itemList: ['问题反馈', '功能建议', '联系客服'],
		success: (res) => {
			switch (res.tapIndex) {
				case 0:
					uni.showToast({ title: '问题反馈功能开发中', icon: 'none' })
					break
				case 1:
					uni.showToast({ title: '功能建议功能开发中', icon: 'none' })
					break
				case 2:
					uni.showToast({ title: '联系客服功能开发中', icon: 'none' })
					break
			}
		}
	})
}
</script>

<style lang="scss" scoped>
.help-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding-bottom: 100rpx;
}

.help-header {
	text-align: center;
	padding: 40rpx 30rpx;
	color: white;
	
	.page-title {
		font-size: 48rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 10rpx;
	}
	
	.page-subtitle {
		font-size: 28rpx;
		opacity: 0.8;
		display: block;
	}
}

.search-section {
	padding: 0 30rpx 30rpx;
	
	.search-box {
		position: relative;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 25rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		backdrop-filter: blur(10rpx);
		
		.search-icon {
			font-size: 32rpx;
			color: #999;
			margin-right: 15rpx;
		}
		
		.search-input {
			flex: 1;
			height: 80rpx;
			font-size: 28rpx;
			color: #333;
			border: none;
			outline: none;
			background: transparent;
		}
		
		.search-clear {
			width: 40rpx;
			height: 40rpx;
			background: #ccc;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			color: white;
			margin-left: 10rpx;
		}
	}
}

.quick-nav {
	padding: 0 30rpx 40rpx;
	
	.nav-title {
		font-size: 32rpx;
		font-weight: bold;
		color: white;
		margin-bottom: 20rpx;
	}
	
	.nav-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15rpx;
		
		.nav-item {
			background: rgba(255, 255, 255, 0.1);
			border-radius: 15rpx;
			padding: 25rpx;
			text-align: center;
			backdrop-filter: blur(10rpx);
			transition: all 0.3s ease;
			
			&:active {
				background: rgba(255, 255, 255, 0.2);
				transform: scale(0.95);
			}
			
			.nav-icon {
				font-size: 48rpx;
				margin-bottom: 10rpx;
			}
			
			.nav-text {
				font-size: 26rpx;
				color: white;
				font-weight: 500;
			}
		}
	}
}

.help-content {
	padding: 0 30rpx;
}

.search-results {
	margin-bottom: 40rpx;
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: white;
		margin-bottom: 20rpx;
	}
	
	.result-list {
		.result-item {
			background: rgba(255, 255, 255, 0.1);
			border-radius: 15rpx;
			padding: 25rpx;
			margin-bottom: 15rpx;
			backdrop-filter: blur(10rpx);
			transition: all 0.3s ease;
			
			&:active {
				background: rgba(255, 255, 255, 0.2);
			}
			
			.result-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 10rpx;
				
				.result-title {
					font-size: 28rpx;
					font-weight: bold;
					color: white;
					flex: 1;
				}
				
				.result-category {
					font-size: 22rpx;
					color: #4CAF50;
					background: rgba(76, 175, 80, 0.2);
					padding: 5rpx 12rpx;
					border-radius: 12rpx;
				}
			}
			
			.result-preview {
				font-size: 24rpx;
				color: white;
				opacity: 0.8;
				line-height: 1.4;
			}
		}
	}
}

.no-results {
	text-align: center;
	padding: 80rpx 20rpx;
	
	.no-results-icon {
		font-size: 80rpx;
		margin-bottom: 20rpx;
	}
	
	.no-results-text {
		font-size: 32rpx;
		color: white;
		font-weight: bold;
		display: block;
		margin-bottom: 10rpx;
	}
	
	.no-results-tip {
		font-size: 26rpx;
		color: white;
		opacity: 0.7;
		display: block;
	}
}

.help-section {
	margin-bottom: 50rpx;
	
	.section-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 25rpx;
		
		.section-title {
			font-size: 36rpx;
			font-weight: bold;
			color: white;
		}
		
		.section-icon {
			font-size: 40rpx;
		}
	}
}

.faq-list {
	.faq-item {
		background: rgba(255, 255, 255, 0.1);
		border-radius: 15rpx;
		margin-bottom: 15rpx;
		backdrop-filter: blur(10rpx);
		overflow: hidden;
		transition: all 0.3s ease;
		
		&.expanded {
			background: rgba(255, 255, 255, 0.15);
		}
		
		.faq-question {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 25rpx;
			transition: all 0.3s ease;
			
			&:active {
				background: rgba(255, 255, 255, 0.1);
			}
			
			.question-text {
				font-size: 28rpx;
				color: white;
				font-weight: 500;
				flex: 1;
				margin-right: 20rpx;
			}
			
			.question-arrow {
				font-size: 32rpx;
				color: white;
				font-weight: bold;
				width: 40rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: rgba(255, 255, 255, 0.1);
				border-radius: 50%;
				transition: all 0.3s ease;
			}
		}
		
		.faq-answer {
			padding: 0 25rpx 25rpx;
			border-top: 1rpx solid rgba(255, 255, 255, 0.1);
			animation: fadeIn 0.3s ease;
			
			.answer-text {
				font-size: 26rpx;
				color: white;
				opacity: 0.9;
				line-height: 1.6;
				display: block;
				margin-bottom: 15rpx;
			}
			
			.answer-steps {
				.step-item {
					display: flex;
					align-items: flex-start;
					margin-bottom: 12rpx;
					
					.step-number {
						width: 40rpx;
						height: 40rpx;
						background: #4CAF50;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 22rpx;
						color: white;
						font-weight: bold;
						margin-right: 15rpx;
						flex-shrink: 0;
					}
					
					.step-text {
						font-size: 24rpx;
						color: white;
						opacity: 0.9;
						line-height: 1.5;
						flex: 1;
						padding-top: 8rpx;
					}
				}
			}
		}
	}
}

.test-cards {
	.test-card {
		background: rgba(255, 255, 255, 0.1);
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		backdrop-filter: blur(10rpx);
		overflow: hidden;
		transition: all 0.3s ease;
		
		&:active {
			background: rgba(255, 255, 255, 0.15);
		}
		
		.test-header {
			display: flex;
			align-items: center;
			padding: 30rpx;
			
			.test-icon {
				font-size: 48rpx;
				margin-right: 20rpx;
			}
			
			.test-info {
				flex: 1;
				
				.test-name {
					font-size: 32rpx;
					font-weight: bold;
					color: white;
					display: block;
					margin-bottom: 8rpx;
				}
				
				.test-desc {
					font-size: 24rpx;
					color: white;
					opacity: 0.8;
					line-height: 1.4;
				}
			}
			
			.test-arrow {
				font-size: 36rpx;
				color: white;
				font-weight: bold;
			}
		}
		
		.test-details {
			padding: 0 30rpx 30rpx;
			border-top: 1rpx solid rgba(255, 255, 255, 0.1);
			animation: fadeIn 0.3s ease;
			
			.detail-section {
				margin-bottom: 25rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.detail-title {
					font-size: 26rpx;
					font-weight: bold;
					color: #4CAF50;
					display: block;
					margin-bottom: 10rpx;
				}
				
				.detail-text {
					font-size: 24rpx;
					color: white;
					opacity: 0.9;
					line-height: 1.6;
					display: block;
				}
				
				.tips-list {
					.tip-item {
						font-size: 24rpx;
						color: white;
						opacity: 0.9;
						line-height: 1.6;
						display: block;
						margin-bottom: 8rpx;
						padding-left: 10rpx;
					}
				}
			}
		}
	}
}

.tips-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15rpx;
	
	.tip-card {
		background: rgba(255, 255, 255, 0.1);
		border-radius: 15rpx;
		padding: 25rpx;
		backdrop-filter: blur(10rpx);
		transition: all 0.3s ease;
		
		&:active {
			background: rgba(255, 255, 255, 0.15);
			transform: scale(0.98);
		}
		
		.tip-header {
				display: flex;
				align-items: center;
				margin-bottom: 15rpx;
				
				.tip-icon {
					font-size: 32rpx;
					margin-right: 12rpx;
				}
				
				.tip-title {
					font-size: 26rpx;
					font-weight: bold;
					color: white;
				}
			}
			
			.tip-content {
				font-size: 24rpx;
				color: white;
				opacity: 0.9;
				line-height: 1.5;
			}
		}
	}
}

.contact-info {
	.contact-item {
		background: rgba(255, 255, 255, 0.1);
		border-radius: 15rpx;
		padding: 25rpx;
		margin-bottom: 15rpx;
		backdrop-filter: blur(10rpx);
		display: flex;
		align-items: center;
		transition: all 0.3s ease;
		
		&:active {
			background: rgba(255, 255, 255, 0.15);
		}
		
		.contact-icon {
			font-size: 40rpx;
			margin-right: 20rpx;
		}
		
		.contact-details {
			flex: 1;
			
			.contact-label {
				font-size: 28rpx;
				font-weight: bold;
				color: white;
				display: block;
				margin-bottom: 5rpx;
			}
			
			.contact-value {
				font-size: 24rpx;
				color: white;
				opacity: 0.8;
				display: block;
			}
		}
	}
}

.feedback-fab {
	position: fixed;
	bottom: 40rpx;
	right: 40rpx;
	width: 100rpx;
	height: 100rpx;
	background: linear-gradient(135deg, #FF6B6B, #FF8E53);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 20rpx rgba(255, 107, 107, 0.3);
	z-index: 1000;
	transition: all 0.3s ease;
	
	&:active {
		transform: scale(0.9);
		box-shadow: 0 4rpx 10rpx rgba(255, 107, 107, 0.3);
	}
	
	.fab-icon {
		font-size: 40rpx;
		color: white;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-10rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

// 响应式适配
@media screen and (max-width: 750rpx) {
	.nav-grid {
		grid-template-columns: 1fr;
	}
	
	.tips-grid {
		grid-template-columns: 1fr;
	}
}
</style>